<template>
	<view>
		<view class="top-bg">
			

		</view>
				<view class="content">
					<view v-for="(c,index) in goods.data" :key="'goods' + index">
						<view class="goods_box">
							<image class="goods_img" :src="c.image" mode="scaleToFill"></image>
							<view class="title">{{  c.name}}</view>
							<view class="num">x{{ c.quantity }}</view>
					
							<view class="norms" v-if="c.sku_dkr ">规格：{{ c.sku_dkr }}</view>
							<view class="norms" v-else>规格：默认</view>
							<view class="money">
								<view>¥</view>{{ c.price }}
							</view>
						</view>
					</view>

				</view>

	


<!-- 		<view class="list_box">
			<view class="text">收货地址</view>

			<view class="addr">
				<view class="left">
					<view class="addr-top">
						<view>陈程何</view>
						<view>18850858036</view>
					</view>
					<view>福建省福州市晋安区福光路162号福建省福州市晋安区福光路162号</view>

				</view>

				<view class="right iconfont">&#xe60e;</view>
			</view>

		</view> -->
		<view class="list_box">
			<view class="text" style="color: #FF0101;">退款金额</view>
			<view class="text-right">
					<view >¥</view>{{ goods.pay_fee }}</view>
		</view>

		<view class="list_box" style="flex-direction: column;">
			<view class="text">退款说明：</view>
			<!-- <view style="height: 90px;"></view> -->
			<textarea placeholder="请描述退款原因..." v-model="reason"></textarea>
			<!-- <view class="evaimg">
				<view class="upload iconfont" @tap="openImg">
					<image :src="url+img"  mode="widthFix"></image>
				</view>
			</view> -->

		</view>

		<view class="confirm" @tap="submitData">提交</view>

	</view>


</template>

<script>
	import { pathToBase64, base64ToPath } from '../../../common/image-tools.js'
	export default {
		data() {
			return {
					img:'',
				url:this.Cfg.Setting.img,
				imgUrl:'',
				postId:'',
				reason:'',
				goodsData:'',
				idNum:'',
				state: 1,
				goods: [{
					number: '订单编号：2019101700140262',
					state: 4,
					num: '1',
					goods_img: '../../static/img03/img1.png',
					title: '2020年新品海尔笔记本电脑轻薄本新品上市',
					money: '25.00',
					time: '2019-12-09',
					t: 0,
				}],
				
				index1: 0,
				array1: ['不想要', '商品有问题', '其他'],
				post1: '请选择',
				scroll: false


			}
		},
		onLoad(e) {
			
			let me = this;
			me.idNum=e.id
				
			me.Net._get('orderDetails',{id:e.id},(res)=>{
				if(res.code ==1){
					me.goods=res.data
				  console.log(res.data)
				}
			});	
			
		},
		methods: {
			submitData(){
				var that = this;
			
				
				if(!that.reason)
				{
					that.Msg.Fail('请输入退款说明');
					return
				}
				
				that.Net._get('orderDetailstk',{id:that.idNum,name:that.reason,img:that.img},(res)=>{
					if(res.code == 1){
						//console.log(res)
						that.Msg.Success('退款申请已提交',(res)=>{
							uni.switchTab({
								url:'/pages/personal/personal'
							})
						})
						
					}
				});
			},
			openImg() {
				let me = this;
				
				            //console.log('用户点击确定');
							uni.chooseImage({
								count: 1, //默认9
								
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album','camera'], //从相册选择
								success: function(chooseImageRes) {
									const tempFilePaths = chooseImageRes.tempFilePaths
									console.log(chooseImageRes)
									pathToBase64(tempFilePaths[0])
															.then(base64 => {
															 
																me.Net._post('upAvatara1',{avatar:base64},(res)=>{
																	if(res.code ==1){
																	me.img=res.data
																    console.log(res)
																	}
																});
															 })
															 .catch(error => {
															 });
													
								}
							});
							
							
				      
				    
				
			
			},
			getOrderData(){
				var that = this;
				that.Net._get('/app/orderdetail',{order_no:that.idNum},(res)=>{
					if(res.code == 20000){
						//console.log(res)
						that.goodsData = res.data;
					}
				});
				
			},
			getApplyData() {
				let me = this;
				
					
				me.Net._get('orderDetails',{id:e.id},(res)=>{
					if(res.code ==1){
						me.goods=res.data
					  console.log(res.data)
					}
				});	
			},
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			chooseImg(e) {
				var that = this;	
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						//console.log(JSON.stringify(res.tempFilePaths[0]));
						that.img = res.tempFilePaths[0];
						that.Tp.pathToBase64(res.tempFilePaths[0]).then(res=>{
						 that.imgUrl = res;
					});
			
					}
				});
			},
			bindPickerChange1: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index1 = e.target.value
				this.post1 = this.array1[this.index1].title;
				this.postId = this.array1[this.index1].id;
			},


		}
		
	}
</script>

<style lang="scss">
	// @import '@/static/iconfont/iconfont.css';
	page {
		background-color: #F5F6F8;
	}

	.seat {
		height: 13.5vw;
		/* #ifndef H5 */
		padding-top: 50rpx;
		/* #endif */
	}

	.top-bg {
		// background: linear-gradient(90deg, #FF173D 0%, #FF0101 100%);
		color: #333333;
		z-index: 1;
		width: 100vw;
		height: 32vw;
		background-color: #4d726f;
		background-repeat: no-repeat;
		background-size: 101% 100%;
		position: fixed;
		z-index: 2;
	}

	.bg_box {
		width: 100%;
		position: relative;

	}


	.bg_box .bg01 {
		display: block;
		width: 100%;
	}

	.header01 {
		width: 100%;
		display: flex;
		position: fixed;
		top: 0vw;
		z-index: 997;
		background-color: transparent;
	}

	.header01 .text {
		flex: 1;
		text-align: center;
		line-height: 13.5vw;
		font-size: 4.5vw;
		color: #333333;
		font-weight: bold;
	}

	.header01 .back {
		font-size: 4.5vw;
		line-height: 13.5vw;
		color: #333333;
		width: 10vw;
		text-align: center;
		padding-left: 3vw;
		transform: rotateY(180deg);
	}

	.content {
		width: 94vw;
		margin: 0 auto;
		background: #fff;
		border-radius: 4vw;
		padding-top: 5vw;
		position: relative;
		z-index: 3;
	}
	
	.content .order_box {
		width: 100%;
		height: 8.6vw;
		position: relative;
	}
	
	.content .order_box .number {
		font-size: 3.8vw;
		color: #232426;
		position: absolute;
		left: 3vw;
		top: 3vw;
	}
	
	.content .order_box .state {
		font-size: 3.8vw;
		color: #f72f4b;
		position: absolute;
		right: 3vw;
		top: 3vw;
	}
	
	.content .goods_box {
		width: 100%;
		height: 39vw;
		position: relative;
		margin-top: 3vw;
	}
	
	
	
	.content .goods_box .goods_img {
		width: 27vw;
		height: 27vw;
		border-radius: 1.8vw;
		position: absolute;
		left: 3vw;
	}
	
	.content .goods_box .title {
		font-size: 3.5vw;
		color: #333;
		width: calc(100% - 130px);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		position: absolute;
		left: 33.2vw;
		top: 2vw;
		margin: 0 !important;
	}
	
	.content .goods_box .num {
		font-size: 3.5vw;
		color: #929292;
		width: 50px;
		text-align: right;
		position: absolute;
		right: 3vw;
		top: 22.3vw;
	}
	
	.content .goods_box .norms {
		font-size: 3.5vw;
		color: #929292;
		position: absolute;
		left: 33.2vw;
		top: 9vw;
	}
	
	.content .goods_box .money {
		font-size: 4vw;
		color: #FD3633;
		position: absolute;
		left: 33.2vw;
		top: 22.3vw;
		display: flex;
		align-items: center;
	}
	
	.content .goods_box .money2 {
		display: flex;
		align-items: center;
		font-size: 3.5vw;
		font-weight: bold;
		color: #FD3633;
		position: absolute;
		right: 3vw;
		top: 30vw;
	
		.iconfont {
			margin: 0 1vw;
		}
	}
	
	.content .goods_box .time {
		font-size: 12px;
		color: #959595;
		position: absolute;
		left: 33.2vw;
		bottom: 0px;
	}
	
	.content .menu_box {
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: flex-end;
		position: relative;
		right: 3vw;
	}
	
	.content .menu_box .menu {
		width: 86px;
		height: 30px;
		border: 1px solid #FFD306;
		box-sizing: border-box;
		margin-top: 3vw;
		margin-left: 3vw;
		border-radius: 30px;
		line-height: 28px;
		text-align: center;
		font-size: 12px;
		background-color: #FFD306;
		color: #232426;
	}
	
	.content .menu_box .menu02 {
		border: 1px solid #ccc !important;
		color: #999 !important;
		background-color: #fff !important;
	}
	
	.content .menu_box .menu03 {
		position: absolute;
		left: 3vw;
		display: flex;
	}
	
	.content .menu_box .menu03 .i {
		font-size: 20px;
		color: #F72F4B;
		line-height: 50px;
		margin-right: 5px;
	}
	
	.content .menu_box .menu03 .t {
		font-size: 12px;
		color: #333;
		line-height: 50px;
	
	}



	.list_box {
		width: 94vw;
		/* height: 40px; */
		margin: 0px auto;
		margin-top: 10px;
		background: #fff;
		position: relative;
		display: flex;
		padding: 4.8vw 3.4vw;
		border-radius: 3vw;
		z-index: 3;

		picker {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.text {
			// line-height: 40px;
			font-size: 4vw;
			font-weight: 500;
			color: #232426;
			// margin-left: 10px;
			margin-right: 5px;
		}

		.text-right {
			color: #FF0101;
			position: absolute;
			right: 10px;
			display: flex;
		}

		.arrow {
			// line-height: 40px;
			position: absolute;
			right: 10px;
			font-size: 11px;
			color: #999;
			top: 22px;
		}

		.reason {
			// line-height: 40px;
			position: absolute;
			right: 7vw;
			font-size: 14px;
			color: #999;
		}

		textarea {
			width: 86%;
			height: 50px;
			padding: 4px 0;
			font-size: 12px;
			color: #333;
			// position: absolute;
			// top: 10vw;

			// left: 0;
			// background-color: red;
		}

		input {
			font-size: 14px;
			color: #333;
			height: 40px;
			line-height: 40px;
		}

		.addr {
			width: 66vw;
			// background-color: red;
			font-weight: 500;
			color: #333333;
			position: relative;
			right: -6vw;
			display: flex;
			align-items: center;

			.left {
				width: 58vw;
				font-size: 3.2vw;

				.addr-top {
					display: flex;
					justify-content: space-between;
					font-size: 3.8vw;
					margin-bottom: 2.8vw;
				}
			}

			.right {
				color: #999999;
				font-size: 11px;
			}

		}

		.evaimg {
			width: 100%;

			.upload {
				width: 13vw;
				height: 13vw;
				// margin-left: 10px;
				border: 1px dashed #BEBEBE;
				text-align: center;
				line-height: 13vw;
				font-size: 28px;
				color: #BFBFBF;
				background-image: url(../../../static/bgg.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}


		}


	}

	
	.scorllHeader {
		background: linear-gradient(-30deg, #FEEC3A 0%, #FFD306 100%);
	}
</style>
